/**
 *  手动实现 createElement
 */

const element = {
  type: "div",
  props: {
    className: ["head"],
    style: "color:red",
  },
  child: [
    {
      type: "div",
      props: {
        style: "color:red",
      },
      child: "this is child",
    },
    {
      type: "p",
      props: {
        style: "color:cyan",
      },
      child: "this is p child",
    },
  ],
};

function render(element, dom) {
  let node = null;
  if (typeof element !== "object") {
    node = document.createTextNode(element);
  } else {
    //其实这里就是Element 类型了
    const { type, props, child } = element;

    node = document.createElement(type);

    // 处理props
    Object.keys(props).forEach((propsKey) => {
      node[propsKey] = props[propsKey];
    });

    // 处理child
    Array.isArray(child)
      ? child.forEach((childItem) => render(childItem, node))
      : (node.innerText = child);
  }

  console.log(node);
  dom.append(node);
}

const a = document.createElement("div");
render(element, document.body);



